<template>
  <div id="container">
    <!-- 头部 -->
    <div class="header">
      <headerTou></headerTou>
      <div class="tabs">
        <div @click="tabs" v-if="showtabs && user.roleName != 'UNIT_ADMIN'">
          切换<i class="el-icon-caret-right"></i>
        </div>
        <div @click="fanhui" v-if="!showtabs">
          <i class="el-icon-caret-left"></i>返回
        </div>
        <img :src="user.dataVLogo ? user.dataVLogo : ''" class="logo" />
      </div>

      <div class="header_right">
        <!-- 汇九川 -->
        <!-- v-if="user.tenantId == '1762803843806539777' || user.tenantId == '1770292338296893442' || user.tenantId == '1772837590137270273'" -->
        <!-- <el-tooltip
          class="item"
          effect="dark"
          content="消防主机"
          placement="bottom"
        >
          <el-image :src="zhuji" @click="onMainframe"></el-image>
        </el-tooltip> -->
        <el-tooltip
          class="item"
          effect="dark"
          content="值守中心"
          placement="bottom"
          v-if="
            (user.roleName === 'ORG_ADMIN' ||
              user.roleName === 'UNIT_ADMIN' ||
              user.roleName === 'INSTERALL_USER') &&
            user.tenantId === '1891441777326878721'
          "
        >
          <!--  -->
          <!-- ry： 1891441777326878721 jwa： 1585818639366049704 -->
          <i class="iconfont monitor_1 tableBtnIcon" @click="onVideo1"></i>
        </el-tooltip>
        <el-tooltip
          class="item"
          effect="dark"
          content="视频监控"
          placement="bottom"
          v-if="
            user.roleName == 'ORG_ADMIN' ||
            user.roleName == 'TENANT_ADMIN' ||
            user.roleName == 'INSTERALL_USER' ||
            user.roleName == 'UNIT_ADMIN'
          "
        >
          <i class="iconfont video tableBtnIcon" @click="onVideo"></i>
        </el-tooltip>
        <el-tooltip
          class="item"
          effect="dark"
          :content="fullScreenContent"
          placement="bottom"
        >
          <i :class="quanping1" @click="onFullScreen"></i>
        </el-tooltip>
        <el-tooltip
          class="item"
          effect="dark"
          content="消控室大屏"
          placement="bottom"
          v-if="user.roleName !== 'INSTERALL_USER' && isExsitHost"
        >
          <i
            class="iconfont jiankongdaping tableBtnIcon"
            @click="onFcDatav"
          ></i>
        </el-tooltip>
        <el-tooltip
          class="item"
          effect="dark"
          content="后台系统"
          placement="bottom"
        >
          <i
            class="iconfont houtai-xitongguanli tableBtnIcon"
            @click="onHoutai"
          ></i>
        </el-tooltip>
        <el-tooltip
          class="item"
          effect="dark"
          content="退出"
          placement="bottom"
        >
          <i class="iconfont tuichu1 tableBtnIcon" @click="exit"></i>
        </el-tooltip>
      </div>
    </div>

    <!-- 租户左侧 -->
    <div class="left" v-if="orgflag">
      <div class="left_div">
        <div class="left_noe">
          <leftNoe ref="refleftNoe"></leftNoe>
        </div>
        <div class="left_three">
          <!-- <leftThree ref="refleftThree"></leftThree> -->
          <equipment ref="refequipment"></equipment>
        </div>
        <div class="left_four">
          <leftFour ref="refleftFour"></leftFour>
        </div>
      </div>
    </div>

    <!-- 单位详情 -->
    <div class="org_box" v-else>
      <div class="left_div">
        <div class="left_noe">
          <orgParticulars></orgParticulars>
        </div>
        <div class="left_two">
          <orgDevice ref="reforgDevice"></orgDevice>
        </div>
        <div class="left_three">
          <orgReport ref="reforgReport"></orgReport>
        </div>
        <div class="left_four">
          <!-- <orgClassify ref="reforgClassify"></orgClassify> -->
          <equipment ref="reforgClassify"></equipment>
        </div>
      </div>
    </div>

    <!-- 中间 -->
    <div class="top_mid" v-show="orgflag">
      <div class="top_mid_noe">
        <midNoe ref="refmidNoe"></midNoe>
      </div>
      <div class="top_mid_two">
        <midTwo ref="refmidTwo"></midTwo>
      </div>
    </div>

    <!-- 地图 -->
    <div :class="!orgflag ? 'midmap2' : 'midmap'">
      <midmap ref="refmidmap" @showUnit="showUnit"></midmap>
    </div>

    <!-- 右侧 -->
    <div class="right">
      <div class="right_div">
        <right ref="refright"></right>
      </div>
      <div class="right_alarm">
        <alarmRanking v-show="orgflag"></alarmRanking>
        <orgSevenDays v-show="!orgflag" ref="reforgSevenDays"></orgSevenDays>
      </div>
    </div>

    <!-- 弹出层 -->
    <el-drawer
      title="我是标题"
      :visible.sync="drawer"
      :with-header="false"
      direction="ltr"
    >
      <div class="title1">
        <span>
          <!-- <span>当前机构：{{ spacesManage.organizationInfo.orgName }}</span> -->
        </span>
        <span style="color: #d1d1d1; cursor: pointer" @click="closedrawer"
          >收起 <i class="el-icon-caret-bottom" style="color: #fff"></i
        ></span>
      </div>

      <!-- <div class="qiehuan1">
        <div @click="orgtabs(1)" :style="showorg ? 'background: #002262;' : ''">
          组织机构
        </div>
        <div
          @click="orgtabs(2)"
          :style="!showorg ? 'background: #002262;' : ''"
        >
          行政区域
        </div>
      </div> -->

      <OrgFilter ref="refTree" @toggleOrg="toggleOrg" v-show="showorg" />

      <RegionFilter
        ref="refOrgFilter"
        @toggleOrg="toggleRegion"
        @regionClose="regionClose"
        @regionSubmit="regionSubmit"
        v-show="!showorg"
      />
    </el-drawer>
    <videoSurveillance ref="refvideoSurveillance"></videoSurveillance>
  </div>
</template>

<script>
import headerTou from "./components/headerTou.vue"; //头部组件
import leftNoe from "./components/leftNoe.vue"; //左一
// import leftThree from "./components/leftThree.vue"; //设备分类 废弃
import equipment from "./components/equipment.vue"; //设备分类新
import leftFour from "./components/leftFour.vue"; //左四
import midNoe from "./components/midNoe.vue"; //中间
import midTwo from "./components/midTwo.vue"; //中间
import right from "./components/right.vue"; //告警组件
import alarmRanking from "./components/alarmRanking.vue"; //本周告警排行
import midmap from "./components/midmap.vue"; //地图

import orgParticulars from "./components/org/orgParticulars.vue"; //单位详情
import orgDevice from "./components/org/orgDevice.vue"; //单位设备统计
// import orgClassify from "./components/org/orgClassify.vue"//单位设备分类 废弃
import orgReport from "./components/org/orgReport.vue"; //单位告警统计
import orgSevenDays from "./components/org/orgSevenDays.vue"; //单位七天趋势
import videoSurveillance from "./components/videoSurveillance/videoSurveillance.vue";
import { handleTree } from "@utils/trans-tree";
import Tree from "@components/tree/Tree.vue"; //组织机构
import OrgFilter from "./components/drawer/OrgFilter.vue"; //组织机构
import RegionFilter from "./components/drawer/RegionFilter.vue"; //组织机构
import {
  reqOrg,
  reqRegion,
  reqCity,
  reqArea,
  reqStreet,
  reqCommunity,
  reqLogout,
  reqClient,
} from "@api/apiDatav.js";
import { reqFireControlRoomPage, reqOrgByUserId } from "@api/api.js";
import { mapState, mapMutations } from "vuex";
import screenfull from "screenfull"; //全屏
import { onDestory } from "@utils/map/map";

export default {
  name: "datav",
  components: {
    headerTou,
    leftNoe,
    // leftThree,
    leftFour,
    midNoe,
    midTwo,
    right,
    alarmRanking,
    midmap,
    orgParticulars,
    orgDevice,
    orgSevenDays,
    orgReport,
    // orgClassify,
    videoSurveillance,
    equipment,
    Tree,
    OrgFilter,
    RegionFilter,
  },
  data() {
    return {
      fullScreenContent: "全屏",
      isExsitHost: false, //是否存在消控室&主机
      quanping1: "iconfont pc-quanping tableBtnIcon",
      zhuji: require("@assets/images/datav/zhuji.png"),
      drawer: false,
      defaultProps: {
        children: "children",
        flatType: "flatType",
        label: "orgName",
      },
      RegionProps: {
        children: "children",
        isLeaf: "hasChildren",
        label: "regionName",
      },
      formInline: {
        orgName: "",
      },
      dataList: [],
      Regionlist: [],
      Regionlisttwo: [],
      showorg: true, //组织|行政区域切换
      orgflag: false, //控制单位|租户页面展示
      showtabs: true, //控制切换按钮
      addInfo: {
        provinceCode: "",
        cityCode: "",
        areaCode: "",
        streetCode: "",
        communityCode: "",
      },
      provinceList: [], //省
      cityList: [], //市
      areaList: [], //区
      streetList: [], //街道
      communityList: [], //社区
      timerval: null,
      logo: require("@assets/images/logo4.png"),
    };
  },
  computed: {
    // cursorGrab() {
    //   return this.$store.datav.state.cursor;
    // },
    ...mapState(["user", "datav", "config", "spacesManage"]),
  },
  watch: {
    cursorGrab(val) {
      this.cursor = val;
    },
  },
  beforeDestroy() {
    clearTimeout(this.timerval); //页面销毁前，清除延时器
  },
  async mounted() {
    this.orgflag = true;
    // 系统管理员
    // if (this.user.roleName == 'TENANT_ADMIN'){
    //   this.orgflag = true;
    // }else if (this.user.roleName == 'ORG_ADMIN') {
    //   this.orgflag = false;
    // }
    this.timerval && clearTimeout(this.timerval);
    this.timerval = setTimeout(async () => {
      // 系统管理员
      // if (this.user.roleName == 'TENANT_ADMIN') {
      this.saveorgarr({}); // 存储单位详情
      this.$nextTick(async () => {
        this.getOrgList(); //所有单位列表
        this.$refs.refequipment.DeviceType();
        this.$refs.refleftFour.AlarmType();
        this.$refs.refmidNoe.getDeviceCount();
        this.$refs.refmidNoe.getTodayAlarmCount();
        this.$refs.refmidTwo.getAlarmTotal();
        this.$refs.refmidTwo.getTodayAlarmCount();
        this.$refs.refmidTwo.getHandlingStatusCount();
        this.$refs.refright.AlarmList(); //告警默认请求十条
        this.$refs.refleftNoe.getOrgDevice();
        this.$refs.refmidmap.getinitMap(true); //地图初始化
      });
      // } else if (this.user.roleName == 'ORG_ADMIN') {
      //   await this.getOrg(false, true)
      //   this.$nextTick(async () => {
      //     this.$refs.reforgDevice.getDeviceCount()//单位设备统计
      //     this.$refs.reforgReport.getAlarmTotal()//单位告警统计
      //     this.$refs.reforgReport.getTodayAlarmCount()//单位告警统计
      //     this.$refs.reforgReport.getHandlingStatusCount()//单位告警统计
      //     this.$refs.reforgClassify.DeviceType(true)//单位设备分类
      //     this.$refs.refright.AlarmList()//告警默认请求十条
      //     this.$refs.refmidmap.getinitMap()//地图初始化
      //     await this.$refs.reforgSevenDays.getSevenDayAlarm()//单位七天告警
      //     await this.$refs.reforgSevenDays.getCahrt()//单位七天告警
      //   })
      // }
    }, 500);
  },
  async created() {
    if (this.user.roleName === "UNIT_ADMIN") {
      // 联网单位管理员
      this.getOrgByUserId();
    } else if (
      this.user.roleName === "ORG_ADMIN" ||
      this.user.roleName === "TENANT_ADMIN"
    ) {
      // 机构和系统管理员
      this.getFireControlRoomPage();
    }

    // this.getMqttInfo();
  },
  methods: {
    ...mapMutations([
      "saveorgarr",
      "saveIsWhiteTheme",
      "saveflagDatav",
      "saveOrgInfo",
    ]),
    onMainframe() {
      this.$router.push("/mainframe");
    },
    onVideo() {
      this.saveOrgInfo({});
      this.$router.push("/video/surveillance");
      // this.$refs.refvideoSurveillance.dialogVisible = true;
      // this.$refs.refvideoSurveillance.init()//初始化
      // this.$refs.refvideoSurveillance.getOrgList()  // 获取单位列表
      // this.$refs.refvideoSurveillance.gettoken()//萤石云初始化
    },
    onVideo1() {
      this.saveOrgInfo({
        orgId: "123123",
      });
      this.$router.push("/video/surveillance");
    },
    // 获取mqtt信息
    async getMqttInfo() {
      let res = await reqClient(this.user.userId);
      //  console.log(res);
      if (res.code !== 20000) return this.$message.error(res.message);
      this.$store.commit("saveMu", res.data.rows.mu);
      this.$store.commit("saveMp", res.data.rows.mp);
      this.$store.commit("saveId", res.data.rows.mc);
    },
    // 行政区域确认按钮
    regionSubmit(data) {
      this.Regionlisttwo = data;
      // console.log(this.Regionlisttwo);
      this.drawer = false;
      this.$refs.refmidmap.getOrg2(this.Regionlisttwo); //切换地图单位列表信息
    },

    // 行政区域重置单位
    regionClose(data) {
      // this.getOrgList();
      this.Regionlisttwo = data;
      this.drawer = false;
      this.$refs.refmidmap.getOrg(); //地图单位列表
    },
    // 查询
    searchClick() {
      this.getOrg(true);
    },
    // 单位列表
    async getOrgList() {
      // 组织
      let res = await reqOrg({
        tenantId: this.user.tenantId,
        userId: this.user.userId,
        roleName: this.user.roleName,
        regionCode: "",
        regionLevel: 1,
        orgId: this.spacesManage.organizationInfo.orgId,
      });
      let rows = res.data.row;
      rows.forEach((item) => {
        item.regionName = item.orgName;
      });
      this.Regionlisttwo = rows;
    },
    // 组织|行政区域
    orgtabs(e) {
      if (e == 1) {
        this.showorg = true;
      } else {
        this.showorg = false;
        // this.$nextTick(()=>{
        //   this.getRegion()
        // })
      }
    },
    // 展示弹窗
    tabs() {
      this.drawer = true;
      this.$nextTick(() => {
        this.getOrg(true); //单位列表
        this.$refs.refOrgFilter.getRegion();
      });
    },
    // 回到租户
    fanhui() {
      this.Regionlisttwo = [];
      this.addInfo = {
        provinceCode: "",
        cityCode: "",
        areaCode: "",
        streetCode: "",
        communityCode: "",
      };
      this.cityList = []; //市
      this.areaList = []; //区
      this.streetList = []; //街道
      this.communityList = []; //社区
      this.getOrgList();

      this.orgflag = true;
      this.showtabs = true;
      this.saveorgarr({}); // 存储单位详情
      this.$nextTick(async () => {
        this.$refs.refmidmap.getOrg(); //地图单位列表
        this.$refs.refequipment.DeviceType();
        this.$refs.refleftFour.AlarmType();
        this.$refs.refmidNoe.getDeviceCount();
        this.$refs.refmidNoe.getTodayAlarmCount();
        this.$refs.refmidTwo.getAlarmTotal();
        this.$refs.refmidTwo.getTodayAlarmCount();
        this.$refs.refmidTwo.getHandlingStatusCount();
        this.$refs.refright.AlarmList(); //告警默认请求十条
        this.$refs.refleftNoe.getOrgDevice();
        this.$refs.reforgSevenDays.getDispose(); //近七天告警趋势 清空
      });
    },
    closedrawer() {
      this.drawer = false;
    },
    // 组织机构
    toggleOrg(e) {
      console.log("e,leftFlag", e);
      // console.log(this.datav.orgarr.id);
      // if (leftFlag == 1) {
      //   // 单位安装统计跳转
      //   e.id = e.orgId;
      // }
      let flag = false;
      if (e.id == this.datav.orgarr.id) {
        flag = true; //切换相同的单位不执行
      }
      this.saveorgarr(e); // 存储单位详情
      this.orgflag = false;
      this.$nextTick(async () => {
        this.$refs.refmidmap.getSpaceByOrgId(false, flag); //地图建筑物列表
        this.$refs.refright.AlarmList(); //告警默认请求十条
        this.$refs.reforgDevice.getDeviceCount(); //单位设备统计
        this.$refs.reforgReport.getAlarmTotal(); //单位告警统计
        this.$refs.reforgReport.getTodayAlarmCount(); //单位告警统计
        this.$refs.reforgReport.getHandlingStatusCount(); //单位告警统计
        this.$refs.reforgClassify.DeviceType(true); //单位设备分类
        this.$refs.reforgSevenDays.getSevenDayAlarm(); //单位七天告警
        // await this.$refs.reforgSevenDays.getCahrt()//单位七天告警
      });
      this.drawer = false;
      // if (this.user.roleName == 'TENANT_ADMIN') {
      this.showtabs = false;
      // }
    },
    // 行政区域
    toggleRegion(e) {
      // console.log(e);
      let flag = false;
      if (e.id == this.datav.orgarr.id) {
        flag = true; //切换相同的单位不执行
      }
      if (e.id) {
        this.saveorgarr(e); // 存储单位详情
        this.orgflag = false;
        this.$nextTick(async () => {
          this.$refs.refmidmap.getSpaceByOrgId(false, flag); //地图建筑物列表
          this.$refs.reforgDevice.getDeviceCount(); //单位设备统计
          this.$refs.reforgReport.getAlarmTotal(); //单位告警统计
          this.$refs.reforgReport.getTodayAlarmCount(); //单位告警统计
          this.$refs.reforgReport.getHandlingStatusCount(); //单位告警统计
          this.$refs.reforgClassify.DeviceType(true); //单位设备分类
          this.$refs.refright.AlarmList(); //告警默认请求十条
          this.$refs.reforgSevenDays.getSevenDayAlarm(); //单位七天告警
          // await this.$refs.reforgSevenDays.getCahrt()//单位七天告警
        });
        this.drawer = false;
        // if (this.user.roleName == 'TENANT_ADMIN') {
        this.showtabs = false;
        // }
      }
    },

    RegionClicktwo() {},

    // 点击地图上单位点标记跳转到建筑物详情
    showUnit(e) {
      // console.log(e,'地图点击');
      this.saveorgarr(e); // 存储单位详情
      this.orgflag = false;
      this.$nextTick(async () => {
        this.$refs.refmidmap.getSpaceByOrgId(); //地图建筑物列表
        this.$refs.refright.AlarmList(); //告警默认请求十条
        this.$refs.reforgReport.getAlarmTotal(); //单位告警统计
        this.$refs.reforgReport.getTodayAlarmCount(); //单位告警统计
        this.$refs.reforgReport.getHandlingStatusCount(); //单位告警统计
        this.$refs.reforgClassify.DeviceType(true); //单位设备分类
        this.$refs.reforgSevenDays.getSevenDayAlarm(); //单位七天告警
        this.$refs.reforgDevice.getDeviceCount(); //单位设备统计
        // await this.$refs.reforgSevenDays.getCahrt()//单位七天告警
      });
      this.drawer = false;
      // if (this.user.roleName == 'TENANT_ADMIN') {
      this.showtabs = false;
      // }
    },

    //单位列表
    async getOrg(init = false, init2 = false) {
      let res = await reqOrg({
        tenantId: this.user.tenantId,
        userId: this.user.userId,
        roleName: this.user.roleName,
        regionCode: "",
        orgName: this.formInline.orgName,
      });
      // console.log(res.data.row);
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      this.dataList = res.data.row;
      if (init2) {
        let rows = res.data.row;
        rows.forEach((item) => {
          item.regionName = item.orgName;
        });
        this.Regionlisttwo = rows;
      }
      if (!init) {
        this.saveorgarr(res.data.row[0]); // 存储单位详情 第一次默认第一个单位详情
      }
    },
    //后台系统
    onHoutai() {
      this.saveIsWhiteTheme(false);
      // this.config.flagDatav=!this.config.flagDatav
      // this.$router.replace("/org/list")
      if (
        this.user.roleName == "INSTERALL_USER" ||
        this.user.roleName == "UNIT_ADMIN"
      ) {
        this.$router.replace("/org/list");
      } else {
        this.$router.replace("/enterprise/org");
      }
      onDestory(); // 销毁地图
      // this.saveflagDatav(true)
      // location.reload();
    },
    // 全屏
    onFullScreen() {
      // if (!screenfull.isEnabled) {
      //   this.$modal.notifyWarning("你的浏览器不支持全屏");
      //   return false;
      // }
      if (screenfull.element == null) {
        this.fullScreenContent = "退出全屏";
        this.quanping1 = "iconfont compress tableBtnIcon";
      } else {
        this.fullScreenContent = "全屏";
        this.quanping1 = "iconfont pc-quanping tableBtnIcon";
      }
      screenfull.toggle();
    },
    // 获取用户所在机构
    async getOrgByUserId() {
      const res = await reqOrgByUserId(this.user.userId);
      if (res.code !== 20000) {
        this.$modal.notifyWarning(res.message);
        return;
      }
      this.getFireControlRoomPage(res.data.rows[0].id);
    },

    // 消控室列表
    async getFireControlRoomPage(orgId = "") {
      try {
        // 请求第一页数据
        const res1 = await reqFireControlRoomPage(1, 99, {
          tenantId: this.user.tenantId,
          userId: this.user.userId,
          roleName: this.user.roleName,
          orgId,
        });

        if (res1.code !== 20000) {
          return this.$modal.notifyWarning(res1.message);
        }

        let allRows = [...res1.data.rows];
        const { total } = res1.data;
        this.isExsitHost = false;

        // 检查第一页数据
        if (this.checkHostExists(allRows)) {
          return;
        }

        // 如果总数超过99，请求第二页数据
        if (total > 99) {
          const res2 = await reqFireControlRoomPage(2, 99, {
            tenantId: this.user.tenantId,
            userId: this.user.userId,
            roleName: this.user.roleName,
          });

          if (res2.code === 20000) {
            allRows = [...allRows, ...res2.data.rows];
            // 检查第二页数据
            this.checkHostExists(allRows);
          }
        }
      } catch (error) {
        console.error("获取消防控制室页面失败:", error);
      }
    },
    // 检查主机是否存在的方法
    checkHostExists(rows) {
      if (rows?.length) {
        for (const item of rows) {
          if (!item.fcrDeviceRelateds?.length) continue;

          if (
            item.fcrDeviceRelateds.some(
              (item2) =>
                item2.deviceType === "UserTransferDevice" ||
                item2.deviceType === "FireAlarmController"
            )
          ) {
            this.isExsitHost = true;
            return true; // 存在主机，返回true
          }
        }
      }
      return false; // 不存在主机
    },
    // 消控室大屏
    onFcDatav(e) {
      if (!this.isExsitHost)
        return this.$modal.notifyWarning("消控室暂无主机设备");
      this.$router.replace({
        path: "/fire/controlRoom/datav",
        query: {},
      });
    },
    // 退出
    exit() {
      this.$confirm("确定要退出账号吗?", "温馨提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const res = await reqLogout({ id: this.user.userId });
          sessionStorage.clear();
          this.$router.push("/login");
          window.location.reload(); //页面重新加载一次即可清空vuex
          onDestory(); // 销毁地图
        })
        .catch(() => {});
    },

    onSubmit() {
      // console.log('submit!');
    },
  },
};
</script>

<style lang="less" scoped>
@import url("./datav.less");

.fontSize (@px, @attr: font-size) {
  @vw: (@px / 1920) * 100;
  @{attr}: ~"@{vw}vw";
}

// 弹窗
::v-deep .el-drawer.ltr,
.el-drawer.rtl {
  width: 22% !important;
}

::v-deep .el-drawer__body {
  // background: linear-gradient(180deg, #1D3294 1%, rgba(0, 25, 102, 0.52) 45%, #1E336E 100%);
  background: #243d83 !important;
  padding-left: 1.5vw;
  padding-right: 1vw;
  padding-top: 3vh;
  box-sizing: border-box;
}

.title1 {
  color: #fff;
  font-size: 14px;
  opacity: 0.8;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: right;
}

.qiehuan1 {
  margin-top: 10px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  font-size: 12px;
  color: #fff;

  > div {
    padding: 6px 20px;
    border-radius: 30px;
    cursor: pointer;
  }

  > div:last-of-type {
    margin-left: 10px;
  }
}

::v-deep .el-tree {
  background: none;
  color: #fff;
  opacity: 0.8;
  // height: 73vh;
  // height: calc(100%-100px);
  height: calc(100% - 185px);
  overflow: auto;
  font-size: 13px;
}

::v-deep .el-tree-node__content {
  padding: 5px 0;
}

/*  鼠标hover改变背景颜色 */
.el-tree ::v-deep .el-tree-node > .el-tree-node__content:hover {
  color: #fff !important;
  background: #001f5b !important;
}

/*  点击时的样式 */
.el-tree ::v-deep .el-tree-node:focus > .el-tree-node__content {
  background-color: #001f5b !important;
}

.el_input {
  width: 80%;
  border-radius: 5px !important;

  ::v-deep .el-input__inner {
    background: #001f5b !important;
    border: none !important;
    border-radius: 5px !important;
    // height: 32px;
    // margin-top: 4px;
  }
}

::v-deep .el-button--primary {
  background: #003c9b !important;
  border: 1px solid #01def9 !important;
  color: #d1d1d1 !important;
}

// el-tree布局
.custom-tree-node {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  padding-left: 0.3%;
  box-sizing: border-box;

  .tree-node_ctrls {
    position: absolute;
    right: 0;
    width: 30%;
    text-align: right;
    padding-right: 10px;
  }
}

::v-deep .div_box .el-input__inner {
  background: #001f5b !important;
  border: 1px solid #192a5f !important;
}

::v-deep .el-tree__empty-block {
  height: 86% !important;
}
</style>
